<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <el-form label-position="left" label-width="80px" :model="register">
        <el-form-item label="账号">
            <el-input  style="width: 300px;" v-model="register.username" @blur="check_username"></el-input>
            <span v-if="username_exists" style="color: greenyellow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{username_message}}</span>
            <span v-else
                  style="color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{username_message}}</span>
        </el-form-item>

        <el-form-item label="密码">
            <el-input style="width: 300px;"  type="password" v-model="register.password" @blur="check_password"></el-input>
            <span v-if="password_exists" style="color: greenyellow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{password_message}}</span>
            <span v-else
                  style="color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{password_message}}</span>

        </el-form-item>

        <el-form-item label="确认密码">
            <el-input style="width: 300px;"  type="password" v-model="register.repair_password" @blur="check_password"></el-input>
            <span v-if="password_exists" style="color: greenyellow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{password_message}}</span>
            <span v-else
                  style="color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{password_message}}</span>

        </el-form-item>

        <el-form-item label="手机号">
            <el-input style="width: 300px;"  type="phone" v-model="register.phone" @blur="check_phone"></el-input>
            <span v-if="phone_exists" style="color: greenyellow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{phone_message}}</span>
            <span v-else
                  style="color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{phone_message}}</span>
        </el-form-item>
        <el-form-item>
            <el-button type="button" @click="registerUser">提交</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                register: {
                    username: '',
                    password: '',
                    repair_password: '',
                    phone: ''
                },
                error: '',
                username_message: '',
                username_exists: true,
                password_message: '',
                password_exists: true,
                phone_message: '',
                phone_exists: true
            }
        },
        methods: {
            registerUser() {
                if (this.username_exists && this.phone_exists && this.password_exists) {
                    let data = new URLSearchParams()
                    data.append('method', 'save')
                    data.append('username', this.register.username)
                    data.append('password', this.register.password)
                    data.append('phone', this.register.phone)
                    axios({
                        method: 'post',
                        url: 'users',
                        data: data
                    }).then(resp => {
                        if (resp.data.success) {
                            location.href = 'index.html'
                            return
                        }
                        this.$message({
                            message: '录入失败',
                            type: 'error'
                        });
                    })
                }
            },
            check_username() {
                axios({
                    url: 'users',
                    params: {
                        method: 'check_username',
                        username: this.register.username
                    }
                }).then(resp => {
                    if (resp.data.success) {
                        this.username_message = '账号可以使用'
                        this.username_exists = true
                    } else {
                        this.username_message = '账号已被占用'
                        this.username_exists = false
                    }
                })
            },
            check_phone() {
                // 1. 正则
                let regex = /^1[3-9]\d{9}$/
                if (!regex.test(this.register.phone)) {
                    this.phone_exists = false
                    this.phone_message = '请输入手机号'
                    return
                }
                // 2. 是否一致
                axios({
                    url: 'users',
                    params: {
                        method: 'check_phone',
                        phone: this.register.phone
                    }
                }).then(resp => {
                    if (resp.data.success) {
                        this.phone_message = '手机号可以使用'
                        this.phone_exists = true
                    } else {
                        this.phone_message = '手机号可以使用'
                        this.phone_exists = false
                    }
                })
            },
            check_password() {
                if (this.register.password === this.register.repair_password) {
                    this.password_message = '密码可以使用'
                    this.password_exists = true
                } else {
                    this.password_message = '两次密码不一致'
                    this.password_exists = false
                }
            }
        }
    })
</script>
